

eRef = useRef(null);
const animationMarkerRef = useRef(null); // 用于动画的标记引用
const mapKey = 'YOUR_AMAP_KEY';
const mapContainerId = 'mapContainer';
const mapOptions = {
    zoom: 10,
    center: [116.397428, 39.90923],
};

useEffect(() => {
    createMap();
}, []);

const createMap = async () => {
    const AMap = await AMapLoader.load({
        key: mapKey,
        version: '2.0',
        plugins: [
            // ... 插件列表
        ],
    });

    const map = new AMap.Map(mapContainerRef.current, mapOptions);

    // 添加其他标记和聚线等（省略）

    // 创建用于动画的标记
    const animationMarker = new AMap.Marker({
        map: map,
        position: [116.478935, 39.997761],
        icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
        offset: new AMap.Pixel(-13, -26),
    });
    animationMarkerRef.current = animationMarker; // 保存引用

    // 设置动画相关的聚线
    const lineArr = [ /* ... 坐标点列表 */];
    const polyline = new AMap.Polyline({ /* ... 聚线配置 */ });
    const passedPolyline = new AMap.Polyline({ /* ... 另一条聚线配置 */ });
    passedPolylineRef.current = passedPolyline;

    // 为动画标记设置 moving 事件监听器
    animationMarker.on('moving', (e) => {
        passedPolyline.setPath(e.passedPath);
        map.setCenter(e.target.getPosition(), true);
    });

    // 定义动画控制函数
    const startAnimation = useCallback(() => {
        animationMarkerRef.current.moveAlong(lineArr, { duration: 500, autoRotation: true });
    }, []);

    const pauseAnimation = useCallback(() => {
        animationMarkerRef.current.pauseMove();
    }, []);

    const resumeAnimation = useCallback(() => {
        animationMarkerRef.current.resumeMove();
    }, []);

    const stopAnimation = useCallback(() => {
        animationMarkerRef.current.stopMove();
    }, []);

    // 在组件内部处理按钮点击事件（可选，但推荐）
    // 或者将这些函数传递给子组件或使用其他 React 状态管理方法
};

return (
    <>
        <div className="input-card">
            <h4>轨迹回放控制</h4>
            <div className="input-item">
                <button className="btn" onClick={startAnimation}>开始动画</button>
                <button className="btn" onClick={pauseAnimation}>暂停动画</button>
            </div>
            <div className="input-item">
                <button className="btn" onClick={resumeAnimation}>继续动画</button>
                <button className="btn" onClick={stopAnimation}>停止动画</button>
            </div>
        </div>
        <div id={mapContainerId} ref={mapContainerRef} style={{ width: '100%', height: '100%' }} />
    </>
);
};

export default MapComponent;